<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div{ */
            /* width: 100px;
            height: 100px;
            background-image: linear-gradient(to right bottom,red,pink,cyan);
            /* 边框  width style color*/
            /* border: 5px solid orange; */
            /* border-top-style: dashed; */
            /* 内边距 */
            /* padding: 10px; */ */
            /* 上下内边距为10px 左右内边距为20px */
            /* padding: 10px 20px; */
            /*  上内边距为10px 左右内边距为20px 下内边距为30px*/
            /* padding 10px 20px 30px */
            /*  四个值按顺时针*/
            /* padding 10px 20px 30px 40px */
            /* } */
        div{
            /* 设置盒moxing
            盒子默认都是内容盒子 */
            box-sizing: content-box;
            width: 100px;
            height: 100px;
            border: 3px solid red;
            margin: 17px 34px 26px;
            padding: 23px 19px 27px;
        }
        .border{
            /* 设置边框盒子 */
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            background-color: rgb(108, 207, 246);
            border: 2px plum;
            margin: 17px 29px 36px;
            padding: 15px 43px 21px;
        }
        /* 盒子模型
        盒子种类：
        1.内容盒子 标准盒子 w3c盒子
           内容盒子计算公式：
               盒子宽：144px 内容区width100+左右内边距19*2+左右边距6
               盒子高：156px 内容区height100+上下内边距23+27+上下边距6
               盒子所占页面宽：212px 盒子宽144+左右外边距34*2
               盒子所占页面高：199px 盒子高156+上下外边距17+26
        2.边框盒子 怪异盒子 ie盒子
               盒子宽：100px=内容区width（10px）+左右内边距43*2+左右边距4
               盒子高：100px=内容区height（60px）+上下内边距15+21+上下边距4 
               盒子所占页面宽：158px 盒子宽100+左右外边距29*2
               盒子所占页面高：153px 盒子高100+上下外边距17+36
        盒子区别：
        width height区别
        内容盒子的width和height设置给内容区
        边框盒子的width和height设置给盒子本身*/
    </style>
</head>
<body>
    <div>内容盒子</div>
    <div class="border">边框盒子</div>
</body>
</html>